$hover-asset-row: $cool-whitegray;
$hover-transition: 0.3s opacity;
$asset-row-spacing: 6px;

.asset-row {
  list-style-type: none;
  border-top: 1px solid $divider-color;
  padding: $asset-row-spacing $asset-row-spacing * 2;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  min-height: 49px;
  opacity: 1;
  position: relative;
  align-items: flex-start;

  &:hover {
    background: $hover-asset-row;

    // avoid displaying border over tooltip
    z-index: 1;
  }

  .asset-row__link-overlay {
    cursor: pointer;
    position: absolute;
    top: -1 * $asset-row-spacing;
    left: -2 * $asset-row-spacing;
    width: calc(100% + #{4 * $asset-row-spacing});
    height: calc(100% + #{2 * $asset-row-spacing});
  }

  > .asset-row__cell {
    width: 100%;
    display: flex;
    align-items: flex-start;

    > .asset-row__cell {
      min-width: 0;
      vertical-align: top;

      &.asset-row__cell--type {
        text-transform: capitalize;
      }
    }
  }

  &:last-child {
    border-top: 1px solid $divider-color;
  }

  &.asset-row--deleting {
    opacity: 0.5;
  }

  &.asset-row--deleted {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    max-height: 0px;
    min-height: 0px;
    padding: 0px;
    border: none;
    overflow: hidden;
  }

  .asset-row__cell--asset-details {
    position: relative;

    &:hover {
      color: $cool-charcoal;
    }
  }

  .asset-row__cell--name {
    font-size: 14px;
  }

  .asset-row__description,
  .asset-row__cell--date-created .date,
  .asset-row__cell--date-modified .date {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // default row-icon styles are meant for "--question"
  .row-icon {
    vertical-align: middle;
    border: 1px solid $cool-green;
    font-size: 13px;
    color: $cool-green;
    width: 36px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    font-style: normal;

    &.row-icon--block {
      color: white;
      background: $cool-green;
    }

    &.row-icon--template {
      border-style: dashed;
    }
  }

  .asset-row__cell--title .row-icon {
    float: left;
    margin-top: -1px;
    margin-bottom: -1px;
  }

  .asset-row__description {
    margin-top: $asset-row-spacing;
    display: block;
    color: $cool-gray;
    font-size: 13px;
  }

  .asset-row__cell--tags {
    white-space: normal;
    margin-top: 0;
  }

  .asset-row__cell--date-created,
  .asset-row__cell--date-modified {
    font-size: 13px;
  }

  .asset-row__cell--submission-count,
  .asset-row__cell--row-count {
    text-align: right;
  }

  // buttons are aligned to the asset title regardless of description or tags being present
  > .asset-row__buttons {
    position: absolute;
    top: 0;
    right: 0;
    padding: $asset-row-spacing $asset-row-spacing 4px;
    width: auto;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transition: $hover-transition;
    background: $hover-asset-row;
    box-shadow: -5px 0px 15px 0px $hover-asset-row;
    z-index: 1;
  }

  .asset-row__action-icon,
  .popover-menu {
    height: 36px;
    display: inline-block;
    vertical-align: top;
  }

  .asset-row__action-icon {
    margin-left: 0px;
    font-weight: 400;
    color: $cool-gray;
    cursor: pointer;

    &:hover {
      background-color: transparent;
      color: $cool-blue;
    }

    &.asset-row__action-icon--view-collection i {
      @extend .k-icon, .k-icon-folder;
    }

    i::before {
      margin: 0px;
      font-size: 36px;
    }
  }

  &.asset-row--display-tags .asset-row__action-icon--tagsToggle {
    background-color: transparent;
    color: $cool-blue;
  }

  &:hover {
    > .asset-row__buttons {
      opacity: 1;
      visibility: visible;
      transition: $hover-transition;

      // make them appear moment after items behind starts to disappear
      transition-delay: 0.1s;
    }
  }
}

@media screen and (max-width: 767px) {
  .asset-row:hover > .asset-row__buttons {
    width: 55%;
  }
}
